import { Button } from '@renderer/components/ui/button'
import {
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle
} from '@renderer/components/ui/drawer'
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { createInsertSchema } from 'drizzle-zod'
import { pluginLocal } from '@shared/constant/schema'
import usePluginLocalStore from '@renderer/store/plugin-local'

import { PluginLocal } from '@shared/types/entity'
import { z } from 'zod'
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from '@renderer/components/ui/form'
import { Input } from '@renderer/components/ui/input'
import { useEffect } from 'react'
import { useShallow } from 'zustand/react/shallow'

const formSchema = createInsertSchema(pluginLocal)

const editByMark = async (data: PluginLocal) => {
  return await window.api.pluginLocal.editByMark(data)
}

const add = async (data: PluginLocal) => {
  return await window.api.pluginLocal.add(data)
}

export function DataDrawerForm() {
  const {
    form: { type, data },
    initData
  } = usePluginLocalStore(
    useShallow((state) => ({
      form: state.form,
      initData: state.initData
    }))
  )

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: data
  })

  async function onSubmit(values: z.infer<typeof formSchema>) {
    console.log('提交DataDrawerForm', type, values)
    if (type === 'add') {
      add(values)
    } else {
      editByMark(values)
    }
    initData()
  }
  useEffect(() => {
    form.reset(data)
  }, [data, type, form])

  return (
    <DrawerContent>
      <div className="mx-auto w-full max-w-sm select-text">
        <Form {...form}>
          <DrawerHeader>
            <DrawerTitle>{type === 'add' ? '新增' : '编辑'} 本地插件</DrawerTitle>
            <DrawerDescription>Set your daily activity goal.</DrawerDescription>
          </DrawerHeader>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
            <FormField
              control={form.control}
              name="mark"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>唯一标识</FormLabel>
                  <FormControl>
                    <Input disabled={type === 'edit'} placeholder="唯一标识..." {...field} />
                  </FormControl>
                  <FormDescription>这是唯一标识</FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="name"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>名称</FormLabel>
                  <FormControl>
                    <Input placeholder="名称..." {...field} />
                  </FormControl>
                  <FormDescription>这是一个名称</FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />
            <DrawerFooter>
              <DrawerClose asChild>
                <Button type="submit">提交</Button>
              </DrawerClose>
              <DrawerClose asChild>
                <Button variant="outline">取消</Button>
              </DrawerClose>
            </DrawerFooter>
          </form>
        </Form>
      </div>
    </DrawerContent>
  )
}
